<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/classteacher/js/jquery-3.5.0.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
    <script src="../bootstrap/popper.min.js"></script>
    <script src="../bootstrap/bootstrap.min.js"></script>
    <script src="/classteacher/Vue/Vue.js"></script>
    <script src="/classteacher/Vue/axios.js"></script>
    <script src="layui/layer/layer.js"></script>
</head>
<style>
    body {
        background-color: rgba(192, 192, 192, 0.3);
    }
</style>

<body>
<div id="app" class="container">
    <button class="btn btn-info" style="width: 120px;margin-left: 740px" @click="message" data-toggle="modal"
            data-target="#msg">消息
    </button>
    <div v-for="(value, key) in clazz">
        <label>{{key}}：</label>
        <table class="table table-light table-bordered table-hover">
            <thead>
            <tr style="text-align: center">
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>账号</th>
                <th>操作</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="stu in value" style="text-align: center">
                <td>{{stu.stuid}}</td>
                <td>{{stu.sname}}</td>
                <td>{{stu.gender}}</td>
                <td>{{stu.birthday}}</td>
                <td>{{stu.phone}}</td>
                <td>{{stu.email}}</td>
                <td>{{stu.account}}</td>
                <td>
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-info" @click="initpwd(stu.stuid)">初始化密码</button>
                        <button type="button" class="btn btn-primary"
                                data-toggle="modal" data-target="#dd" @click="changeClass(stu.stuid)">转班
                        </button>
                        <button type="button" class="btn btn-danger" @click="quit(stu.stuid)">退学</button>
                    </div>
                </td>
            </tr>
            </tbody>

            <tfoot>
            </tfoot>
        </table>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="dd">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">请选择转入的班级</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <table class="table table-hover">
                        <tr>
                            <th>年级</th>
                            <th>班级名称</th>
                            <th>类型</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="t in classs">
                            <td v-if="t.gaId==1">高一</td>
                            <td v-if="t.gaId==2">高二</td>
                            <td v-if="t.gaId==3">高三</td>
                            <td>{{t.tname}}</td>
                            <td>{{t.teamType}}</td>
                            <td>
                                <button class="btn" @click="shiftTo(t.teId)">转入</button>
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="msg">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">信息</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <table class="table table-hover">
                        <tr>
                            <th>原班</th>
                            <th>学生</th>
                            <th>转入班</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="c in mes">
                            <td>{{c.originClassName}}</td>
                            <td>{{c.studentName}}</td>
                            <td>{{c.awaitClassName}}</td>
                            <td v-if="c.status==1">
                                <button class="btn btn-info" @click="consent(c.cid,c.awaitClassId,c.studentId)">同意
                                </button>
                                <button class="btn btn-danger" @click="refuse(c.cid)">拒绝</button>
                            </td>
                            <td v-if="c.status==2">
                                已同意
                            </td>
                            <td v-if="c.status==3">
                                已拒接
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    /*李英勇：退学
    * 牟强：转班、初始化密码*/
    let refreshToken = localStorage.getItem("refreshToken");
    let token = localStorage.getItem("token");
    new Vue({
        el: "#app",
        data: {
            clazz: {},
            classs: [],
            stuId: 0,
            mes: []
        },
        methods: {
            initpwd: function (stuId) {
                console.log(stuId);
                var params = new URLSearchParams();
                params.append("stuId", stuId);
                axios.post("uppwd", params, {
                    headers: {
                        "token": token,
                        "refreshToken": refreshToken
                    }
                }).then(res => {
                    console.log(res.data);
                    if (res.data.code == 0) {
                        layer.msg("初始化密码成功");
                    } else {
                        layer.msg(res.data.msg);
                    }
                    if (res.headers.token != null) {
                        //更新本地token
                        localStorage.setItem("token", res.headers.token);
                    }
                });
            },
            changeClass: function (stuId) {
                this.stuId = stuId;//将需要转班的学生赋值到data中
                let re = localStorage.getItem("refreshToken");
                let to = localStorage.getItem("token");
                //获取所有班级
                axios.get("initChangeClass", {
                    headers: {
                        "token": to,
                        "refreshToken": re
                    }
                }).then(res => {
                    console.log(res.data.data);
                    if (res.data.code == 0) {
                        this.classs = res.data.data;
                    } else {
                        layer.msg(res.data.msg);
                    }
                    if (res.headers.token != null) {
                        //更新本地token
                        localStorage.setItem("token", res.headers.token);
                    }
                });

            },
            quit: function (sid) {
                console.log(sid);
                var params = new URLSearchParams();
                params.append("sid", sid);
                axios.post("quitSchoolForStu", params, {
                    headers: {
                        "token": token,
                        "refreshToken": refreshToken
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        layer.msg(res.data.msg);
                        if (res.headers.token != null) {
                            //更新本地token
                            localStorage.setItem("token", res.headers.token);
                        }
                    }
                })
            },
            shiftTo: function (teId) { //转班
                console.log(teId);
                console.log(this.stuId);
                let stuId = this.stuId;
                layer.msg('确定将该学生转班？', {
                    time: 0 //不自动关闭
                    , btn: ['确定', '取消']
                    , yes: function (index) {
                        layer.close(index);//如果设定了yes回调，需进行手工关闭
                        let params = new URLSearchParams();
                        params.append("studentId", stuId);
                        params.append("awaitClassId", teId);
                        axios.post("changeclass", params, {
                            headers: {
                                "token": token,
                                "refreshToken": refreshToken
                            }
                        }).then(res => {
                            console.log(res.data);
                            if (res.data.code == 0) {
                                layer.msg(res.data.msg);
                                if (res.headers.token != null) {
                                    //更新本地token
                                    localStorage.setItem("token", res.headers.token);
                                }
                            } else {
                                layer.msg(res.data.msg);
                            }
                        });
                    }
                });
            },
            message: function () {//转班列表
                axios.get("changeclasslist", {
                    headers: {
                        "token": token,
                        "refreshToken": refreshToken
                    }
                }).then(res => {
                    console.log(res.data);
                    if (res.data.code == 0) {
                        this.mes = res.data.data;
                        if (res.headers.token != null) {
                            //更新本地token
                            localStorage.setItem("token", res.headers.token);
                        }
                    }
                });
            },
            refuse: function (cId) {//拒绝学生转班
                console.log(cId);
                let params = new URLSearchParams();
                params.append("changeClassId", cId);
                axios.post("refuse", params, {
                    headers: {
                        "token": token,
                        "refreshToken": refreshToken
                    }
                }).then(res => {
                    console.log(res.data);
                    if (res.data.code == 0) {
                        if (res.headers.token != null) {
                            //更新本地token
                            localStorage.setItem("token", res.headers.token);
                        }
                        for (let i = 0; i < this.mes.length; i++) {
                            let data = this.mes[i];
                            if (data.cid == cId) {
                                data.status = 3;
                                break;
                            }
                        }
                    } else {
                        layer.msg(res.data.msg);
                    }
                });
            },
            consent: function (cId, awaitClassId, studentId) {
                console.log(cId + "+" + awaitClassId + "+" + studentId);
                let params = new URLSearchParams();
                params.append("cId", cId);
                params.append("awaitClassId", awaitClassId);
                params.append("studentId", studentId);
                axios.post("consent", params, {
                    headers: {
                        "token": token,
                        "refreshToken": refreshToken
                    }
                }).then(res => {
                    console.log(res.data);
                    if (res.data.code == 0) {
                        if (res.headers.token != null) {
                            //更新本地token
                            localStorage.setItem("token", res.headers.token);
                        }
                        //渲染页面
                        for (let i = 0; i < this.mes.length; i++) {
                            let data = this.mes[i];
                            if (data.cid == cId) {
                                data.status = 2;
                                break;
                            }
                        }
                    } else {
                        layer.msg(res.data.msg);
                    }
                })

            }
        },
        mounted() {
            axios.get("findStusByTmids", {
                headers: {
                    "token": token,
                    "refreshToken": refreshToken
                }
            }).then(res => {
                console.log(res.data.data);
                if (res.data.code == 0) {
                    this.clazz = res.data.data;
                    if (res.headers.token != null) {
                        //更新本地token
                        localStorage.setItem("token", res.headers.token);
                    }
                }

            });
        }
    })
    ;
</script>
</body>
</html>